
/*头部导航栏*/
#header-wrapper{ width:100%; height:30px;background:#F5F5F5;padding:0 2.5%;
box-sizing:border-box;overflow:hidden}
.header-left{ float:left;line-height:30px;}
.header-left a{color:#000;padding:0 10px;font-size:12px;}
.header-left a:hover{color:#c40;}
.header-right{float:right}
.header-right ul li{float:left;line-height:30px}
.header-right ul li a{color:#000;padding:0 10px;font-size:12px;}
.header-right ul li:nth-of-type(1) a{color:#c40}
.header-right ul li a i{font-size:12px;padding-left:8px;margin-top:1px;}
.header-right ul li a:hover{color:#c40;}
.header-right ul li a:hover i{color:#000;}

/*logo、搜索框*/
#logo-wrapper{ width:100%; height:118px;padding:30px  2.5% 0px;box-sizing:border-box;
overflow:hidden;position:relative}
#logo-wrapper .logo{ width:275px; height:50px;float:left}
#logo-wrapper .logo a{width:275px; height:50px; display:block;text-indent:-999px;
background:url("../images/zol-logo.png") no-repeat}

#logo-wrapper .search{ width:540px; height:88px;position:absolute;left:400px;top:30px;}
#logo-wrapper .search input:nth-of-type(1){ width:427px; height:20px;border: 2px solid #c40000;
font-size: 14px;  padding: 6px 10px;  color: #666;float:left;}
#logo-wrapper .search input:nth-of-type(2){ width:89px; height:36px;background:#c40000;
color:white;font-size:16px;line-height:36px;text-align:center; border:none;float:left;}
#logo-wrapper .search ul{ height:16px;margin-top:45px;}
#logo-wrapper .search ul li{ height:16px;margin-right:20px;float:left;}
#logo-wrapper .search ul li a{color:#666;font-size:12px;}
#logo-wrapper .search ul li a:hover{text-decoration:underline ;color:#c40;}

#logo-wrapper .telphone{ height:53px; width:166px;float:right}
#logo-wrapper .telphone a{font-size:18px;color:#c40000;font-weight:800;display:block;
}
#logo-wrapper .telphone p span{color:#c40000}

/*nav*/
#nav-wrapper{ width:100%; height:40px;background:#c40000;padding:0 2.5%;
overflow:hidden;box-sizing:border-box;}
#nav-wrapper h3{ height:40px; width:200px;text-align:center;float:left;}
#nav-wrapper h3 a{color:white;line-height:40px;}
#nav-wrapper ul{float:left;}
#nav-wrapper ul li{padding:0 20px; height:40px;float:left;text-align:center;;
}
#nav-wrapper ul li a{line-height:40px;color:white;font-size:16px;}
#nav-wrapper ul li:hover{background:#c31f1e}

#nav-wrapper .nav-right{float:right;height:40px;}
#nav-wrapper .nav-right a{color:white;font-size:14px;line-height:40px;}
#nav-wrapper .nav-right a:hover{text-decoration:underline}

/*banner图*/
#banner-wrapper{width:100%;padding:0 2.5%;position:relative;
overflow:hidden;box-sizing:border-box}
#banner-wrapper .banner-left{ width:200px; height:300px;float:left;background:#c40000;}
#banner-wrapper .banner-left ul{ width:200px; height:300px;}
#banner-wrapper .banner-left ul li{ width:180px; height:40px;margin:0 10px;float:left;
border-bottom:1px dotted white;}
#banner-wrapper .banner-left ul li a{ padding:0 10px;width:180px; height:40px;color:white;
font-size:14px;line-height:40px; }
#banner-wrapper .banner-left ul li a i{margin-right:5px;}
#banner-wrapper .banner-left ul li:hover{background:#c31f1e}
#banner-wrapper .banner-left ul li:nth-last-child(1){border-bottom:none}

#banner-wrapper .banner-right{ width:300px; height:300px;float:right}
#banner-wrapper .banner-right a{display:block; width:300px; height:150px;}

#banner-wrapper .banner-right a:nth-of-type(1){background:url("../images/banner-right (1).jpg")}
#banner-wrapper .banner-right a:nth-of-type(2){background:url("../images/banner-right (2).jpg")}

#banner-wrapper .banner{ width:700px; height:300px;position:absolute;left:230px;top:0px;
overflow:hidden}
#banner-wrapper .banner .imgs{ width:2800px; height:300px;position:absolute;left:0;top:0}
#banner-wrapper .banner .imgs li{ width:700px; height:300px;float:left;}
#banner-wrapper .banner .dots{ position:absolute;line-height:15px;left:300px;bottom:20px}
#banner-wrapper .banner .dots li{float:left; width:15px; height:15px;background:white;border-radius:50%;
margin:0 10px;}
#banner-wrapper .banner .dots .current{background:#c31f1e}

/*正品保障*/
#saf-wrapper{width:100%; height:80px;padding:0 2.5%;box-sizing:border-box;overflow:hidden}
#saf-wrapper .saf{ width:100%; height:80px;display:block;background:#fafafa;color:#c31f1e;
padding:0 28px;box-sizing:border-box}
#saf-wrapper .saf ul li{float:left; width:240px; height:80px;}
#saf-wrapper .saf ul li:nth-of-type(5){ width:186px;}
#saf-wrapper .saf ul li i{ width:40px; height:40px;line-height:40px;text-align:center;
border:2px solid #c31f1e ;border-radius:50%;display:block;float:left;
font-size:24px;font-weight:100;margin:20px 10px 0px 0px;}
#saf-wrapper .saf ul li span{line-height:80px;font-size:18px;}

/*fix栏*/
#clearfix-wrapper{ width:100%;height:88px;padding:0 2.5%; box-sizing:border-box;overflow:hidden}
.topfix{ width:100%; height:45px;background:white;float:left;}
.topfix-left{ float:left;line-height:45px;}
.topfix-left a{color:#000;padding:0 10px;font-size:20px;}
.topfix-left a:hover{color:#c40;}
.topfix-right{float:right}
.topfix-right ul li{float:left;line-height:45px}
.topfix-right ul li a{color:#000;padding:0 10px;font-size:12px;}
.topfix-right ul li:nth-of-type(1) a{color:#c40}
.topfix-right ul li a i{font-size:12px;padding-left:8px;margin-top:1px;}
.topfix-right ul li a:hover{color:#c40;}
.topfix-right ul li a:hover i{color:#000;}

.bottomfix{width:100%; height:38px;border:1px solid #ccc;background:#F5F5F5;  overflow:hidden}
.bottomfix ul{ width:100%; height:38px;float:left;}
.bottomfix ul li{float:left;line-height:38px;padding:0px 20px;}
.bottomfix ul li:nth-of-type(1){background:white; height:38px;border-right: 1px solid #ccc;
}
.bottomfix ul li:nth-of-type(1) a{color:#c40;}
.bottomfix ul li a{color:#333;}
.bottomfix ul li a i{color:#333;font-size:14px;}

/*主体图区*/
#main-wrapper{width:100%;padding:0 2.5%; box-sizing:border-box;}
.main{display: flex;flex-wrap: wrap;justify-content: space-between;}
.main li{ width:385px; height:450px; border:1px solid #999;margin-top:20px;}
.main li:hover{ border:1px solid red}
.main li a{color:#333}
.main li a .pic-img img{ width:385px; height:290px;}
.main li a .pic-dec{padding:15px; width:100%;box-sizing:border-box}
.main li a .pic-dec p{font-size:14px;}
.main li a .pic-dec span{color:#999;}
.main li a .pic-sal{padding:0 15px; width:100%;box-sizing:border-box;}
.main li a .pic-sal e{color:#c31f1e;font-size: 26px;font-weight: 900}
.main li a .pic-sal s{color:#999;font-size: 14px;padding: 0 8px;}
.main li a .pic-sal span:nth-of-type(1){color:#c31f1e;font-size: 26px;font-weight: 900}
.main li a .pic-sal span:nth-of-type(2){  border: 1px solid #c31f1e;font-size: 14px;padding: 3px;}
.main li a .pic-sal .rob{font-size: 18px;color:white;padding: 6px 10px;
background: #c31f1e;border-radius: 4px;margin-left:52px;}
.main li a .pic-time{margin:24px 15px; box-sizing:border-box;
    line-height:20px;border-top:1px dashed #999;padding-top:10px; }
.main li a .pic-time .last-time{color:#999;font-size:14px;}
#main-wrapper .main-bottom{  width: 100%;height:50px;text-align: center}
#main-wrapper .main-bottom a{color:#999;line-height:50px;font-size: 14px;text-align: center}

/*脚部指南*/
#groupfooter-wrapper{width:100%;padding:40px 2.5% 60px; box-sizing:border-box;overflow: hidden}
.group-footer{  width: 100%}
.group-footer dl{width: 175px;float: left;}
.group-footer dl dt{font-weight: 900;font-size: 14px;color:#000;line-height: 32px;}
.group-footer dl dd a{font-weight: 100;font-size: 12px;color:#000;line-height: 30px;}
.group-footer dl dd a:hover{text-decoration: underline;color:#c31f1e}
.group-footer dl dd a i{font-size:20px;color:red;padding:0 3px;}
.group-footer .qr-code{float: left; }
.group-footer .qr-code p img{  width: 106px;  height: 106px;margin-bottom: 10px;}
.group-footer .qr-code p{font-size:12px;line-height:18px;text-align: center}

/*公用底部*/
#footer-wrapper{width:100%;padding:25px 2.5% 30px; box-sizing:border-box;overflow: hidden;
background: #000}
.footer{  height: 222px;}
.footer .partner{position:relative;}
.footer .partner p{margin-left:60px;
    width: 1010px;}
.footer .partner span{position: absolute;left:0;top:0;color:#999;
    width: 60px;font-size:12px;  height: 24px;line-height:24px;}
.footer  p a{color:white;padding: 0 10px;line-height: 24px;  }
.footer  p a:hover{text-decoration: underline}
.footer .footer-nav p a{color:white;padding: 0 20px 0 0;line-height: 24px;}
.footer .help-center{padding: 30px 0 0;}
.footer .help-center p a{color:#999;padding:0 20px 0 0px;line-height: 24px;  }
/*返回顶部*/
#shoot-top{
    width: 35px;
    height: 135px;display: flex;flex-direction: column;justify-content: space-between;
    position: fixed;right:39px;bottom: 40px;}
#shoot-top a{display: block;  width: 35px;border-radius: 4px;line-height: 16px;
    height: 35px;background: #5e5e5d;color:white;text-align: center;position: relative}
#shoot-top a .qr-code{background: white;display: none;
    width: 124px;position: absolute; left:-126px;top:-30px;padding: 10px 0;
    border: 1px solid #ccc;}
#shoot-top a .qr-code p img{  width: 106px;  height: 106px;margin-bottom: 10px;}
#shoot-top a .qr-code p{font-size:12px;line-height:18px;text-align: center;color:#999}
#shoot-top a:hover .qr-code{display: block}

/*登陆窗口*/
#load-wrapper{width:100%; height:100%; padding:0px;box-sizing:border-box;overflow: hidden;
background: rgba(99,99,99,0.5);position:fixed;z-index:100;top:0;left:0;display:none}
#load-wrapper .load{ width:330px; height:370px; border:4px solid #333333;position:absolute;
background:#fff;left:50%;top:50%;margin-left:-165px;margin-top:-185px;
opacity:1}
.load .load-top{ width:330px; height:39px;border-bottom:1px solid #6b6b6b;padding:8px 20px;
box-sizing:border-box;background:#fafafa}
.load .load-top h3{font-size:16px;font-weight:900;color:#333333;}
.load .load-top a{ width:22px; height:22px;border-radius:50%;display:block;color:#000;
text-decoration:none;position:absolute; top:6px;right:6px;text-align:center;line-height:22px;}
.load .load-top a:hover{background:#666}
.load div{ width:330px;padding:8px 20px; box-sizing:border-box;}
.load div input{ width:100%; height:30px;padding:0 10px;box-sizing:border-box}
.load div .checkbox{ width:14px; height:14px;margin-right:5px;}
.load div:nth-of-type(6) input{border:none;background:#c31f1e;color:whitesmoke;font-size:16px;}
.load div a{display:block;float:right}
.load div a:hover{text-decoration:underline;color:#c31f1e;}
.load .cop{ width:100%; height:60px;margin-top:28px;}
.load .cop a{ width:38px; height:38px;border-radius:50%; border-top:1px solid #ccc;
text-align:center;line-height:38px;margin:0px 7px;}
.load .cop a i{font-size:23px;}
.load .cop a:nth-of-type(1){color:#c31f1e;}
.load .cop a:nth-of-type(1):hover{background-color:#c31f1e;color:white;text-decoration:none}
.load .cop a:nth-of-type(2){color:#00b0e0;}
.load .cop a:nth-of-type(2):hover{background-color:#00b0e0;color:white;text-decoration:none}

.load .cop a:nth-of-type(3){color:#e78f08;}
.load .cop a:nth-of-type(3):hover{background-color:#e78f08;color:white;text-decoration:none}

.load .cop a:nth-of-type(4){color:blue;}
.load .cop a:nth-of-type(4):hover{background-color:blue;color:white;text-decoration:none}
.load p{ width:290px;margin:0px 20px; border:1px solid red;line-height:20px;background:pink;
color:red;display:none}






